<template>
	<view class="yearPicker" v-if="showYear">
		<view class="pickerMain">
			<view class="flex alignCenter font16 justConBetween title">
				<view class="" @click.stop="cancel">取消</view>
				<view class="colorMain" @click.stop="sure">确定</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-yearpicker",
		props:{
			showYear:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				years:[],
				year:'',
				value: [0],
				changeOper:false,
				indicatorStyle: `height: 40px;line-height:40px`
			};
		},
		mounted() {
			let nowYear=new Date().getFullYear()
			for (let i = nowYear; i >= 1990; i--) {
				this.years.push(i)
			}
		},
		methods:{
			bindChange(e) {
				console.log('e',e)
				const val = e.detail.value
				this.changeOper=true
				this.year = this.years[val[0]]
			},
			cancel(){
				this.changeOper=false
				this.$emit('cancel')
			},
			sure(){
				console.log('year',this.year)
				let chooseYear=''
				if(this.changeOper){
					chooseYear=this.year || this.years[0]
				}else{
					chooseYear=this.years[0]
				}
				this.$emit('sureYear',chooseYear)
				this.changeOper=false
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.yearPicker{
	position: fixed;
	background: rgba(0, 0, 0, .1);
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	.pickerMain{
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		.title{
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid $bordercolor;
		}
	}
}
.picker-view {
	width: 100%;
	height: 500rpx;
	margin-top: 20rpx;
}
.item {
	line-height: 40px;
	text-align: center;
}
</style>